<template>
  <div class="post-card">
    <div class="post-card-header">
      <router-link
        :to="{
          name: 'user-profile',
          params: { id: post.userId },
          query: { nickname: post.nickname },
        }"
        class="user-link"
      >
        <img class="avatar" :src="getUserAvatar(post.avatar, post.userId)" alt="头像" />
      </router-link>
      <router-link
        :to="{
          name: 'user-profile',
          params: { id: post.userId },
          query: { nickname: post.nickname },
        }"
        class="user-link"
      >
        <span class="nickname">{{ post.nickname }}</span>
      </router-link>
      <span class="time">{{ post.time }}</span>
    </div>
    <div class="post-card-content" @click="goDetail">
      {{ post.content }}
    </div>
    <div class="post-card-footer" @click="goDetail">
      <span class="icon-group">
        <span class="icon-item">
          <svg viewBox="0 0 20 20" width="18" height="18" fill="currentColor">
            <path
              d="M10 18c-.26 0-.52-.1-.72-.29C7.1 15.66 2 11.05 2 7.5 2 4.42 4.42 2 7.5 2c1.54 0 3.04.81 3.88 2.09C12.46 2.81 13.96 2 15.5 2 18.58 2 21 4.42 21 7.5c0 3.55-5.1 8.16-7.28 10.21-.2.19-.46.29-.72.29z"
            ></path>
          </svg>
          {{ post.likes }}
        </span>
        <span class="icon-item">
          <svg viewBox="0 0 20 20" width="18" height="18" fill="currentColor">
            <path
              d="M18 10c0 3.31-3.13 6-7 6-.98 0-1.92-.13-2.8-.36l-4.11 1.13a1 1 0 01-1.23-1.23l1.13-4.11A6.96 6.96 0 012 10c0-3.31 3.13-6 7-6s7 2.69 7 6z"
            ></path>
          </svg>
          {{ post.comments }}
        </span>
      </span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getUserAvatar } from '@/utils/avatar'
const props = defineProps({
  post: {
    type: Object,
    required: true,
  },
})
const router = useRouter()
function goDetail() {
  router.push({ name: 'post-detail', params: { id: props.post.id } })
}
</script>

<style scoped>
.post-card {
  background: var(--color-surface, var(--color-input-bg));
  border-radius: 1rem;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.22),
    0 2px 8px 0 rgba(0, 0, 0, 0.13);
  padding: 1.2rem 1.2rem 0.8rem 1.2rem;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
}
.post-card:hover {
  box-shadow: 0 0 28px 10px var(--color-primary-glow, #5eb3ff);
  border-color: var(--color-primary-hover, #409eff);
}
.post-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
}
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.7rem;
  cursor: pointer;
  border: 2px solid var(--color-primary);
}
.nickname {
  font-weight: 600;
  color: var(--color-primary);
  margin-right: 1rem;
  cursor: pointer;
}
.time {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.post-card-content {
  font-size: 1.08rem;
  color: var(--color-text);
  margin-bottom: 1.1rem;
  cursor: pointer;
  word-break: break-all;
}
.post-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding-bottom: 0.2rem;
}
.icon-group {
  display: flex;
  gap: 1.2rem;
}
.icon-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.user-link {
  text-decoration: none;
  color: inherit;
  display: contents;
}
</style>
